
.fly_heart {
    width: 2.44rem;
    height: 1.42rem;
    background: url("../assets/images/page0/fly_heart/fly_heart1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: fly-heart 0.8s linear infinite alternate;
    -moz-animation: fly-heart 0.8s linear infinite alternate;; /* Firefox */
    -webkit-animation: fly-heart 0.8s linear infinite alternate;; /* Safari and Chrome */
    -o-animation: fly-heart 0.8s linear infinite alternate;; /* Opera */
}

@keyframes fly-heart {
    0% {
        background: url("../assets/images/page0/fly_heart/fly_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_heart/fly_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_heart/fly_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_heart/fly_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_heart/fly_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_heart/fly_heart6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-moz-keyframes fly-heart {
    0% {
        background: url("../assets/images/page0/fly_heart/fly_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_heart/fly_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_heart/fly_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_heart/fly_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_heart/fly_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_heart/fly_heart6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-webkit-keyframes fly-heart {
    0% {
        background: url("../assets/images/page0/fly_heart/fly_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_heart/fly_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_heart/fly_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_heart/fly_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_heart/fly_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_heart/fly_heart6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-o-keyframes fly-heart {
    0% {
        background: url("../assets/images/page0/fly_heart/fly_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_heart/fly_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_heart/fly_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_heart/fly_heart4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_heart/fly_heart5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_heart/fly_heart6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.fly_UP {
    width: 2.44rem;
    height: 1.42rem;
    background: url("../assets/images/page0/fly_up/fly_up1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: fly-UP 0.8s linear infinite alternate;
    -moz-animation: fly-UP 0.8s linear infinite alternate;; /* Firefox */
    -webkit-animation: fly-UP 0.8s linear infinite alternate;; /* Safari and Chrome */
    -o-animation: fly-UP 0.8s linear infinite alternate;; /* Opera */
}

@keyframes fly-UP {
    0% {
        background: url("../assets/images/page0/fly_up/fly_up1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_up/fly_up2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_up/fly_up3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_up/fly_up4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_up/fly_up5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_up/fly_up6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-moz-keyframes fly-UP {
    0% {
        background: url("../assets/images/page0/fly_up/fly_up1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_up/fly_up2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_up/fly_up3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_up/fly_up4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_up/fly_up5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_up/fly_up6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-webkit-keyframes fly-UP {
    0% {
        background: url("../assets/images/page0/fly_up/fly_up1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_up/fly_up2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_up/fly_up3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_up/fly_up4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_up/fly_up5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_up/fly_up6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

}

@-o-keyframes fly-UP {
    0% {
        background: url("../assets/images/page0/fly_up/fly_up1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    15% {
        background: url("../assets/images/page0/fly_up/fly_up2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    40% {
        background: url("../assets/images/page0/fly_up/fly_up3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    60% {
        background: url("../assets/images/page0/fly_up/fly_up4.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    80% {
        background: url("../assets/images/page0/fly_up/fly_up5.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page0/fly_up/fly_up6.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}



.fly_left {
    animation: fly-left 3s linear infinite normal;
    -moz-animation: fly-left 3s linear infinite normal;; /* Firefox */
    -webkit-animation: fly-left 3s linear infinite normal;; /* Safari and Chrome */
    -o-animation: fly-left 3s linear infinite normal;; /* Opera */
}

@keyframes fly-left {
    0% {
        position: absolute;
        left: 1rem;
        bottom: 0;
    }
    100% {
        position: absolute;
        left: -2.54rem;
        bottom: 80%;
    }
}



@-moz-keyframes fly-left {
    0% {
        position: absolute;
        left: 1rem;
        bottom: 0;
    }
    100% {
        position: absolute;
        left: -2.54rem;
        bottom: 80%;
    }
}

@-webkit-keyframes fly-left {
    0% {
        position: absolute;
        left: 1rem;
        bottom: 0;
    }
    100% {
        position: absolute;
        left: -2.54rem;
        bottom: 80%;
    }
}

@-o-keyframes fly-left {
    0% {
        position: absolute;
        left: 1rem;
        bottom: 0;
    }
    100% {
        position: absolute;
        left: -2.54rem;
        bottom: 80%;
    }
}


.fly_right {
    animation: fly-right 2.5s linear infinite normal;
    -moz-animation: fly-right 2.5s linear infinite normal;; /* Firefox */
    -webkit-animation: fly-right 2.5s linear infinite normal;; /* Safari and Chrome */
    -o-animation: fly-right 2.5s linear infinite alternate;; /* Opera */
}

@keyframes fly-right {
    0% {
        position: absolute;
        right: 0.8rem;
        bottom: 0;
    }
    100% {
        position: absolute;
        right: -2.54rem;
        bottom: 95%;
    }
}



@-moz-keyframes fly-right {
    0% {
        position: absolute;
        right: 0.8rem;
        bottom: 0;
    }
    100% {
        position: absolute;
        right: -2.54rem;
        bottom: 95%;
    }
}

@-webkit-keyframes fly-right {
    0% {
        position: absolute;
        right: 0.8rem;
        bottom: 0;
    }
    100% {
        position: absolute;
        right: -2.54rem;
        bottom: 95%;
    }
}

@-o-keyframes fly-right {
    0% {
        position: absolute;
        right: 0.8rem;
        bottom: 0;
    }
    100% {
        position: absolute;
        right: -2.54rem;
        bottom: 95%;
    }
}





.myanimation {
    animation: myanimation 1.5s linear infinite alternate;
    -moz-animation: myanimation 1.5s linear infinite alternate;; /* Firefox */
    -webkit-animation: myanimation 1.5s linear infinite alternate;; /* Safari and Chrome */
    -o-animation: myanimation 1.5s linear infinite alternate;; /* Opera */
}

@keyframes myanimation {

}

@-moz-keyframes myanimation {
    
}

@-webkit-keyframes myanimation {
   
}

@-o-keyframes myanimation {
    
}